<template>
    <el-dialog :title="headerTitle" :close-on-click-modal="false" :visible.sync="visible" top="5vh" width="780px">
        <!-- 新增 -->
        <template v-if="type == 'add'">
            <el-form class="dialog-form" :model="dataForm">
                <el-form-item label="套餐月数" prop="months">
                    <el-input size="small" maxlength="3" v-model="dataForm.months" placeholder="请输入套餐月数"></el-input>
                </el-form-item>

                <el-form-item label="能量值" prop="energyValue">
                    <el-input size="small" maxlength="5" v-model="dataForm.energyValue" placeholder="请输入能量值"></el-input>
                </el-form-item>

                <el-form-item label="是否连续包月" prop="isRenew">
                    <el-radio-group v-model="dataForm.isRenew">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="连续包月能量值" prop="renewValue" v-if="dataForm.isRenew == 1">
                    <el-input size="small" maxlength="5" v-model="dataForm.renewValue" placeholder="请输入能量值"></el-input>
                </el-form-item>

                <el-form-item label="资费备注" prop="remark">
                    <el-input size="small" maxlength="30" v-model="dataForm.remark" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="default-btn" @click="close">{{
                    $t("remindPop.cancel")
                }}</div>
                <div class="default-btn primary-btn" @click="dataFormSubmit()">{{
                    $t("remindPop.confirm")
                }}</div>
            </span>
        </template>
        <!-- 详情 -->
        <template v-if="type == 'detail'">
            <div class="detail">
                <div><p>套餐月数:</p>{{ this.months }}</div>
                <div><p>能量值:</p>{{ this.energyValue }}</div>
                <div><p>是否连续包月:</p>{{ this.isRenew == 1 ? '是':'否' }}</div>
                <div v-if="this.isRenew"><p>连续包月能量值:</p>{{ this.renewValue }}</div>
                <div><p>资费备注:</p>{{ this.remark }}</div>
            </div>
        </template>
        <!-- 修改 -->
        <template v-if="type == 'modify'">
            <el-form class="dialog-form" :model="dataForm">
                <el-form-item label="月数" prop="months">
                    <el-input size="small" maxlength="3" v-model="dataForm.months" placeholder="请输入套餐月数"></el-input>
                </el-form-item>

                <el-form-item label="能量值" prop="energyValue">
                    <el-input size="small" maxlength="5" v-model="dataForm.energyValue" placeholder="请输入能量值"></el-input>
                </el-form-item>

                <el-form-item label="是否连续包月" prop="isRenew">
                    <el-radio-group v-model="dataForm.isRenew">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="连续包月能量值" prop="renewValue" v-if="dataForm.isRenew == 1">
                    <el-input size="small" maxlength="5" v-model="dataForm.renewValue" placeholder="请输入能量值"></el-input>
                </el-form-item>

                <el-form-item label="资费备注" prop="remark">
                    <el-input size="small" maxlength="30" v-model="dataForm.remark" placeholder="备注"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <div class="default-btn" @click="close">{{
                    $t("remindPop.cancel")
                }}</div>
                <div class="default-btn primary-btn" @click="dataFormSubmit()">{{
                    $t("remindPop.confirm")
                }}</div>
            </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    props: ['months', 'energyValue', 'isRenew', 'renewValue', 'remark','id'],
    data() {
        return {
            theData: null,
            visible: false,
            dataForm: {
                months: '', //月份
                energyValue: '', //能量值
                isRenew: 0, //是否连续包月
                renewValue: '', //连续包月能量值
                remark: '', //资费备注
            },
            isSubmit: false,
            type: '',
            headerTitle: '',
        }
    },

    methods: {
        init(type) {
            this.type = type
            this.visible = true
            this.isSubmit = false
            //新增
            if(type == 'add') {
                this.headerTitle = "新增"
                this.dataForm = {
                    months: '',
                    energyValue: '',
                    isRenew: 0,
                    renewValue: '',
                    remark: ''
                }
            }

            //详情
            if(type=='detail'){
                this.headerTitle = "详情"
                this.dataForm.months = this.months
                this.dataForm.energyValue = this.energyValue
                this.dataForm.isRenew = this.isRenew
                this.dataForm.renewValue = this.renewValue
                this.dataForm.remark = this.remark
            }

            if(type=='modify'){
                this.headerTitle = "修改"
                this.dataForm = {
                    months: this.months,
                    energyValue: this.energyValue,
                    isRenew: this.isRenew,
                    renewValue: this.renewValue,
                    remark: this.remark
                }
            }
        },
        // 表单提交
        dataFormSubmit() {
            if (!this.dataForm.months) {
                this.$message({
                    type: 'error',
                    message: `请输入套餐月数`
                });
                return
            }

            if (!this.dataForm.energyValue) {
                this.$message({
                    type: 'error',
                    message: `请输入能量值`
                });
                return
            }

            if (this.dataForm.isRenew == 1) {
                if (!this.dataForm.renewValue) {
                    this.$message({
                        type: 'error',
                        message: `请输入连续包月能量值`
                    });
                    return
                }
            } else {
                this.dataForm.renewValue = null
            }
            const obj = JSON.parse(JSON.stringify(this.dataForm))
            obj.months = this.dataForm.months
            obj.energyValue = this.dataForm.energyValue
            obj.isRenew = this.dataForm.isRenew
            obj.renewValue = this.dataForm.renewValue
            obj.remark = this.dataForm.remark
            if(this.type=="modify"){obj.id = this.id}
            this.$http({
                url:  this.type=='modify'? this.$http.adornUrl('/admin/ultra/group/cost/edit') : this.$http.adornUrl('/admin/ultra/group/cost/add'),
                method: 'post',
                data: this.$http.adornData(obj)
            }).then(({ data }) => {
                this.$message({
                    message: this.type=='modify'? '修改成功' : "新增成功",
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('refreshDataList')
                        this.dataForm = ''
                    }
                })
            }).catch((e) => {
                this.isSubmit = false
            })
        },

        //关闭弹窗
        close(){
            this.visible = false;
            this.dataForm.months = ""
            this.dataForm.energyValue = ""
            this.dataForm.isRenew = ""
            this.dataForm.renewValue = ""
            this.dataForm.remark = ""
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-form {
    ::v-deep .el-form-item {
        margin-bottom: 4px;
    }
}
</style>

<style lang="scss" scoped>
.dialog-form {
    ::v-deep .el-form-item {
        margin-bottom: 4px;
    }
}

.question-icon {
    position: relative;
    right: 30px;
    // top: -13px;
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: #C8C9CC;
    border-radius: 50%;
    margin-left: 5px;
    cursor: default;
}

.notice-content {
    ::v-deep .el-form-item__label:before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
    }
}

::v-deep .el-form-item__label {
    width: 300px !important;
}

.el-input {
    width: 200px;
}
.detail div{
    display: flex;
    justify-content: center;
    text-align: center;
    height: 40px;
    color: #999;
}
.detail div p{
    margin-right: 10px;
}
</style>
